<template>
	<view>
		<view class="navView">
			<view class="navItem" v-for="(item,index) in navList" :key="index" @click="navClick(index)">
				<text>{{item}}</text><i class="iconfont iconxiala"></i>
			</view>
		</view>
		<view class="pop" v-if="isArr" @tap="closeALL">
			<scroll-view scroll-y="true" :class="arr.length >=10 ? 'popView':'popShort'">
				<view>
					<view class="popItem" :class="arrIndex == index ? 'popActive':''" v-for="(item,index) in arr" :key="index"
					 @tap.stop="itemClick(index)">{{item}}</view>
				</view>
			</scroll-view>
		</view>
		<view class="not_data" v-if="dataList.length==0">
			<i class="iconfont iconzanwukecheng"></i>
			<view class="not_data_text">当前暂无课表</view>
		</view>
		<view v-else class="table">
			<view class="table-tr">
				<view class="table-td">
					<view class="sub-table">
						<view class="sub-table-tr">
							<view class="table-th">
								<view class="date">日期</view>
								<view class="time">时段</view>
							</view>
							<view class="table-th" v-for="(item,index) in dayList" :key="index">
								<view class="th-top">{{item.name}}</view>
								<view class="th-bottom">{{item.time}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="table-tr" v-if="dataList.length>0" v-for="(value,index) in dataList" :key="index">
				<view class="table-td">
					<view class="sub-table">
						<view class="sub-table-tr">
							<!-- 第一列 -->
							<view class="sub-table-td">
								<view>{{value.coumlNum}}</view>
								<view>{{value.timeStart}}</view>
								<view>-</view>
								<view>{{value.timeEnd}}</view>
							</view>
							<!-- 第一列 -->
							<!-- 第二列开始循环 -->
							<!-- 午休 -->
							<view class="sub-table-td wuxi" v-if="value.weekList==null">{{value.timeName}}</view>
							<!-- 午休 -->
							<view v-else class="sub-table-td"
							 :style="
							 val.End<time?
							 'color:#000000;':
							 val.Start<time&&time<val.End?
							 'background:#ff9900; color:#ffffff;':
							 val.Start>time?
							 'color:#ff9900;':
							 ''
							 "
							 v-for="(val,weekindex) in value.weekList" :key="weekindex" @click="show(index,weekindex)">
								<view v-if="val.state!=5&&val.state!=6" class="subject">{{val.subjectName}}</view>
								<view v-if="val.subjectName!='-'&&val.overTime==1" class="yuan" :style="val.isArrive&&val.arriveType==2?'background:#FF9900':val.isArrive&&val.arriveType==1?'background:#ff9900':'background:#FF7171'"></view>
							</view>
							<!-- 第二列开始循环 -->
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import util from '@/common/util.js'
	export default {
		data() {
			return {
				time:+new Date(),
				navList: ['班级名称', '学期名称', '周名称'],
				navIndex: 0,

				parent_id: '', //机构id
				classList: [], //班级列表
				groupid: '', //班级ID

				yearList: [], //学期列表
				yearId: '', //学期ID
				weekList: [], //周列表
				weekId: '', //周期ID
				typeId:'',


				arr: [], //模态框列表
				arrIndex: null, //模态框索引
				isArr: false, //模态框是否出现
				// now_day: new Date().getMonth() + 1 + '.' + new Date().getUTCDate(), // 获取当天时间，用来区分每次选择周数如果刚好对应今天则给他一个激活字体样式


				dayList: [{
					'name': '周一',
					'dayId': 1
				}, {
					'name': '周二',
					'dayId': 2
				}, {
					'name': '周三',
					'dayId': 3
				}, {
					'name': '周四',
					'dayId': 4
				}, {
					'name': '周五',
					'dayId': 5
				}, {
					'name': '周六',
					'dayId': 6
				}, {
					'name': '周日',
					'dayId': 7
				}],
				dataList: [],
				timeList: [], //获取回来的时间段
				timecouml: [], //处理后的时间段
				coursesList: [], //课程表
			}
		},
		props: {
			stu_id: ''
		},
		created() {
			console.log("created=====");
		},
		methods: {
			/* 获取孩子班级列表 */
			getClass: function() {
				this.$zapi.apiPost('user/Grade.User/GradeList').then(res => {
					if (res.data.code == 200 && res.data.data) {
						this.classList = res.data.data;
						var index=0;
						// if(uni.getStorageSync('class_index') && this.classList.length < uni.getStorageSync('class_index')){
						// 	var index=uni.getStorageSync('class_index');
						// }
						this.navList[0] = this.classList[index].group_name;
						this.$forceUpdate();
						this.parent_id = this.classList[index].parent_id;
						this.groupid = this.classList[index].groupid;
						if (this.parent_id) {
							this.getYear(); //获取学期
						}
					} else {
						this.classList = [];
					}
				})
			},
			//获取学期
			getYear: function() {
				var data = {
					schoolId: this.parent_id,
					reqMethod: 2,
					pageSize: 99
				}
				var url = 'schoolYear/selSchoolYearBySchoolId';
				this.getData(url, data, 'Year');
			},
			//获取周列表
			getweekList: function() {
				
				var data = {
					schoolId: this.parent_id,
					reqMethod: 2,
					yearId: this.yearId,
					page: 1,
					pageSize: 99
				};
				var url = 'week/selWeekAll';
				// var data = {
				// 	schoolId: this.parent_id,
				// 	reqMethod: 2,
				// 	yearId: this.yearId
				// } 
				// var url = 'week/selWeekByChoose';
				this.getData(url, data, 'weekList');
			},
			//获取时段列表
			getDayTime: function() {
				var data = {
					typeId: this.typeId,
					reqMethod: 2
				};
				var url = 'time/selTimeByTimeTypeId';
				this.getData(url, data, 'Daytime');
			},
			// 获取课程数据
			getCourses: function() {
				var data = {
					schoolId: this.parent_id,
					classId: this.groupid,
					stuId: this.stu_id,
					reqMethod: 2,
					yearId:this.yearId
				};
				
				if(this.weekId){
					data.weekId=this.weekId;
				}
				var url = 'course/selCourseForStudent';
				this.getData(url, data, 'courses');
			},
			//请求获取数据
			getData: function(url, data, type) {
				var _this = this;
				this.$capi.apiPost(url, data).then(res => {
					if (res.data.code == 200) {
						_this.setData(res.data.data, type);
					} else {
						_this.setData([], type);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				});
			},
			// 处理数据
			setData: function(data, type) {
				switch (type) {
					case 'Year':
						this.yearList = [];
						if (data.obj) {
							this.yearList = data.obj;
							var isyear = true;
								this.yearList.forEach((item, key) => {
									var yearStart = +new Date(item.yearStart.replace(/\-/g, '/') + ' 00:00:00');
									var yearEnd = +new Date(item.yearEnd.replace(/\-/g, '/') + ' 00:00:00');
									var date = +new Date();
									if (yearStart < date && date < yearEnd) {
										isyear = false;
										this.navList[1] = item.yearName;
										this.yearId=item.yearId;
										this.getweekList();
									}
								});
								if (isyear&&this.yearList.length>0) {
									this.navList[1] = this.yearList[0].yearName;
									this.yearId= this.yearList[0].yearId;
									this.getweekList();
								}
						}
						// this.yearList = [];
						// if (data.obj) {
						// 	this.yearList = data.obj;
						// 	// this.navList[1] = "选择学期";
						// 	// this.navList[2] = "本周";
						// 	// var date = new Date();
						// 	// var time = date.format("yyyy-MM-dd HH:mm:ss");
						// 	// this.setDaytime(time);
						// 	// this.getCourses();
						// 	this.navList[1] = data.obj[0].yearName;
						// 	this.yearId = data.obj[0].yearId;
						// 	//获取周列表
						// 	this.getweekList();
						// }
						break;
					case 'weekList':
					this.weekList = data.obj;
					if (this.weekList) {
						var isweek = true;
						this.weekList.forEach((item,key)=>{
							var weekStart = +new Date(item.weekStart.replace(/\-/g, '/') + ' 00:00:00');
							var weekEnd = +new Date(item.weekEnd.replace(/\-/g, '/') + ' 00:00:00');
							var date = +new Date();
							if (weekStart < date && date < weekEnd) {
								isweek = false;
								this.navList[2] = item.weekName;
								this.weekId=item.weekId;
								this.setDaytime(item.weekStart);
								this.getCourses();
							}
							
						})
						if (isweek&&this.weekList.length > 0) {
							this.navList[2] = this.weekList[0].weekName;
							this.weekId = this.weekList[0].weekId;
							this.setDaytime(this.weekList[0].weekStart);
							this.getCourses();
						}
					}
					// this.weekList = data.obj;
					// if (data.obj.length > 0) {
					// 	this.navList[2] = data.obj[0].weekName;
					// 	this.weekId = data.obj[0].weekId;
					// 	this.setDaytime(data.obj[0].weekStart);
					// 	this.getCourses();
					// }
						break;
					case 'Daytime':
						this.timeList = data;
						this.repTime();
						break;
					case 'courses':
						this.coursesList = data;
						if(data.length>0){
							this.typeId=data[0]['time'].typeId;
							//获取时段
							this.getDayTime();
						}
				}
				this.$forceUpdate();
			},
			//处理星期一到星期天时间
			setDaytime: function(weekStart) {
				var currentDate = new Date(weekStart.replace(/\-/g, '/'))
				var timesStamp = currentDate.getTime();
				var currenDay = currentDate.getDay();
				var dates = [];
				for (var i = 0; i < 7; i++) {
					dates.push(util.getLeftTime(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)))
				}
				var days = dates.map((item, index) => {
					this.dayList[index]['time'] = item.substr(5).replace(/\-/g, '.');
					return this.dayList[index];
				});
			},

			// 处理时段数据
			repTime: function() {
				// var time = [];
				// this.timeList.forEach((item, index) => {
					
					
					
					
					
					
					
				// 	var startlength = this.timeList[index]['times'].length;
				// 	if (this.timeList[index + 1]) {
				// 		var endlength = this.timeList[index + 1]['times'].length;
				// 		if (endlength != 0) {
				// 			var obj = {
				// 				timeStart: this.timeList[index]['times'][startlength - 1]['timeEnd'],
				// 				timeEnd: this.timeList[index + 1]['times'][0]['timeStart'],
				// 				timeId: null,
				// 				timeName: index == 0 ? '午休' : '傍晚'
				// 			};
				// 			time.push(obj)
				// 		}
				// 	}
				// });
				// console.log(time);
				this.timecouml = this.timeList;
					this.setcoursData();
			},
			setcoursData: function() {
				var coumlNum = 1;
				this.timecouml.map((item, index) => {
					item.timeEnd = item.timeEnd.slice(0, 5);
					item.timeStart = item.timeStart.slice(0, 5);
					if (item.timeId == null) {
						item['weekList'] = null;
					} else {
						var weekList = [];
						this.dayList.forEach((value, dayindex) => {
							var obj = {};
							obj.subjectName = '-';
							this.coursesList.forEach((val, cindex) => {
								if (val.time.timeId == item.timeId && val.dayId == value.dayId) {
									obj = val;
									obj.Start = +new Date(val.courseDay.replace(/\-/g, '/')+' '+val.time.timeStart);
									obj.End = +new Date(val.courseDay.replace(/\-/g, '/')+' ' +val.time.timeEnd );
									if (obj.isArrive) {
										obj.isArrive = JSON.parse(obj.isArrive);
									}
								}
							});
							weekList.push(obj);
						})
						item['weekList'] = weekList;
						item['coumlNum'] = coumlNum++;
					}
				});
				this.dataList = this.timecouml;
			},
			/* pop切换 */
			navClick(index) {
				this.isArr = true;
				this.navIndex = index;
				this.arrIndex=null;
				var arr = []
				this.arr = [];
				
				switch (index) {
					case 0:
						if (this.classList.length > 0) {
							for (var i = 0; i < this.classList.length; i++) {
								arr.push(this.classList[i].group_name);
							}
							this.arr = arr;
						} else {
							uni.showToast({
								title: '该生还没有加入任何班级',
								icon: 'none'
							})

							this.isArr = false;
						}
						break;
					case 1:

						if (this.yearList.length > 0) {
							for (var i = 0; i < this.yearList.length; i++) {
								arr.push(this.yearList[i].yearName);
							}
							this.arr = arr;
						} else {
							uni.showToast({
								title: '该班级还没有添加学期',
								icon: 'none'
							})

							this.isArr = false;
						}
						break;
					case 2:
						if (this.weekList.length > 0) {
							for (var i = 0; i < this.weekList.length; i++) {
								arr.push(this.weekList[i].weekName);
							}
							this.arr = arr;
						} else {
							uni.showToast({
								title: '该班级还没有添加周期',
								icon: 'none'
							})

							this.isArr = false;
						}
						break;
				}
				
				for (var i = 0; i < this.arr.length; i++) {
					if (this.navList[this.navIndex] == this.arr[i]) {
						this.arrIndex = i;
					}
				}
			},
			/* 关闭蒙版 */
			closeALL() {
				this.isArr = false;
			},
			/* popItem切换 */
			itemClick(index) {
				this.navList[this.navIndex] = this.arr[index];
				switch (this.navIndex) {
					case 0:
						this.parent_id = this.classList[index].parent_id;
						this.groupid = this.classList[index].groupid;
						this.weekList = [];
						this.yearList = [];
						this.dataList = [];
						this.navList[1] = '学期名称';
						this.navList[2] = '周名称';
						this.yearId ='';
						this.weekId='';
						if (this.parent_id) {
							this.getYear(); //获取学期
							//获取时段
							// this.getDayTime();
						} else {
							uni.showToast({
								title: '该班级还没加入机构',
								icon: 'none'
							})
						}
						break;
					case 1:
						this.yearId = this.yearList[index].yearId;
						this.weekId='';
						this.navList[2] = '周名称';
						this.weekList = [];
						this.dataList = [];
						this.getweekList();
						break;
					case 2:
						this.weekId = this.weekList[index].weekId;
						this.dataList = [];
						this.setDaytime(this.weekList[index].weekStart);
						this.getCourses();
						break;
				}
				this.isArr = false;
				this.$forceUpdate();
			},
			show: function(index, weekindex) {
				var data = this.dataList[index].weekList[weekindex];
				data.time.timeStart = data.time.timeStart.slice(0, 5);
				data.time.timeEnd = data.time.timeEnd.slice(0, 5);
				var _this = this;
				//#ifdef APP-PLUS
				var subNVue = uni.getSubNVueById('grouppopup')
				// 弹出确认框
				subNVue.show('none', 300, function() {});
				subNVue.postMessage({
					'data': data,
					'groupid': _this.groupid
				});

				//#endif
			}

		},
		mounted() {
			var that=this;
			this.$on('bridge',()=>{
				that.getClass();
				console.log("mounted");
			})
		},
		watch: {
			stu_id: {
				immediate: true,
				handler(val) {
					this.getClass();
				}
			}
		}
	}
</script>

<style lang="scss">
	.not_data {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.not_data i {
		margin-top: 20upx;
		font-size: 400upx;
		line-height: 300upx;
		color: rgba(229, 229, 229, 1);
	}

	.not_data_text {
		color: #C2C2C2;
		font-size: 42upx;
		line-height: 40upx;
	}

	/* 课表 */
	.tableView {
		margin: -48upx auto 20upx;
		width: 690upx;
		border-radius: 20upx;
		background: #FFFFFF;
	}



	.navView {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 10upx;
		margin-bottom: 30upx;
	}

	.navItem {
		width: 33.3%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.navItem text {
		width: 75%;
		color: #333333;
		font-size: 30upx;
		padding-left: 10upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* pop */
	.pop {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0%;
		left: 0%;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popView {
		width: 80%;
		height: 70%;
		border-radius: 50upx;
		background: #FFFFFF;
	}

	.popShort {
		width: 80%;
		border-radius: 50upx;
		background: #FFFFFF;
	}

	.popItem {
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #666666;
		font-size: 36upx;
		border-top: 2upx solid #E5E5E5;
	}

	.popItem:first-child {
		border-top: none;
	}

	.popActive {
		color: #ff9900;
	}

	/* 下拉框 */
	/* 表格 */
	$view-table-border-color: rgba(229, 229, 229, 1);
	$view-table-border-width: 1upx;

	.table {
		position: relative;
		display: table;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border-bottom: $view-table-border-width solid $view-table-border-color;
		background: #FFFFFF;

		.date {
			display: flex;
			justify-content: flex-end;
			font-size: 18upx;
			color: #333333;
			margin-bottom: 15upx;
		}

		.time {
			display: flex;
			justify-content: flex-start;
			font-size: 18upx;
			color: #333333;
			margin-left: 10upx;
		}

		.wuxi {
			width: 89.9% !important;
			text-align: center;
			color: #333333 !important;
			font-size: 24upx !important;
		}

		.table-tr {
			display: table-row;
		}

		.table-td {
			display: table-cell;
		}

		.sub-table {
			width: 100%;
			display: table;
		}

		.sub-table-tr {
			display: table-row;

			.sub-table-td {
				width: 10.9%;
				display: table-cell;
				vertical-align: middle;
				height: 110upx;
				border-right: $view-table-border-width solid $view-table-border-color;
				border-left: $view-table-border-width solid $view-table-border-color;
				border-top: $view-table-border-width solid $view-table-border-color;

				view {
					font-size: 20upx;
					// color: #333333;
					line-height: 25upx;
					text-align: center;
				}

				i {
					color: #FF7171;
					position: relative;
					top: 10upx;
					left: 29upx;
					font-size: 60upx;
					line-height: 0;
				}

				.subject {
					// color: #333333;
					font-size: 23upx;
					margin-top: 30upx;
				}

				.yuan {
					width: 10upx;
					height: 10upx;
					border-radius: 50%;
					background: #FF7171;
					margin: auto;
					margin-top: 20upx;
				}

				&+.sub-table-td {
					width: 12.7%;
					border-left: none;
				}

				.addsubject {
					view {
						color: #C2C2C2 !important;
						font-size: 22upx !important;
						line-height: 30upx !important;
					}
				}
			}

			.table-th {
				width: 10.9%;
				display: table-cell;
				vertical-align: middle;
				height: 100upx;

				&+.table-th {
					width: 12.7%;
					border-left: none;
				}

				.th-top {
					text-align: center;
					font-size: 28upx;
					color: #333333;
				}

				.th-bottom {
					font-size: 20upx;
					text-align: center;
					color: #666666;
				}
			}
		}
	}


	/* 激活样式 */
	.th-active {
		color: #ff9900 !important;
	}

	/* 单个属性 */
	.td-width {
		margin: auto;
		width: 64upx;
	}

	.dib {
		display: inline-block;
		width: 64upx;
	}

	/* 下拉选择容器 */
	.cs-select-x {
		display: flex;
	}
</style>
